<template>
  <div class="progress-editor-menu w-full sticky top-0 flex flex-wrap items-center backdrop-blur bg-white/90 dark:bg-neutral-900 p-2 lg:p-4 z-50">
    <div class="px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer" @click="undo">
      <RemixIcon name="arrow-go-back-line" />
    </div>
    <div class="px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer" @click="redo">
      <RemixIcon name="arrow-go-forward-line" />
    </div>
    <div class="px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer" @click="save">
      <RemixIcon name="save-line" />
    </div>
    <div class="px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer" @click="share">
      <RemixIcon name="share-line" />
    </div>
    <div class="px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer" @click="doImport">
      <RemixIcon name="import-line" />
    </div>
    <Dropdown class="px-2 py-1 rounded-lg hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer"
      :options="exportOptions" :arrow="false">
      <template #title>
        <RemixIcon name="export-line"></RemixIcon>
      </template>
      <template #item="{ item }">
        <div
          class="h-8 leading-8 px-2 rounded mb-1 hover:bg-neutral-100 dark:hover:bg-neutral-500 cursor-pointer text-gray-700 dark:text-gray-200"
          @click="doExport(item.value)">
          <RemixIcon :name="item.icon" />
          <span class="ml-2">{{ item.label }}</span>
        </div>
      </template>
    </Dropdown>
  </div>
</template>
<script setup>
import RemixIcon from './RemixIcon.vue';
import Dropdown from './Dropdown.vue';
import i18n from '../i18n';
const props = defineProps({
  editor: Object
})
const exportOptions = [{
  value: 'markdown',
  label: `${i18n.t('export')} Markdown`,
  icon: 'markdown-line'
}, {
  value: 'json',
  label: `${i18n.t('export')} JSON`,
  icon: 'javascript-line'
}, {
  value: 'html',
  label: `${i18n.t('export')} HTML`,
  icon: 'html5-line'
}, {
  value: 'image',
  label: `${i18n.t('export')} Image`,
  icon: 'file-image-line'
}, {
  value: 'docx',
  label: `${i18n.t('export')} Word`,
  icon: 'file-word-line'
}];
// const count = computed(() => props?.editor?.storage?.characterCount?.words());
const undo = () => {
  props.editor && props.editor.chain().focus().undo().run()
}
const redo = () => {
  props.editor && props.editor.chain().focus().redo().run()
}
const save = () => {
  props.editor && props.editor.chain().focus().save().run()
}
const share = () => {
  props.editor && props.editor.chain().share().run()
}
const doImport = () => {
  props.editor && props.editor.chain().import().run()
}
const doExport = (type) => {
  props.editor && props.editor.chain().export(type).run()
}
</script>


<style lang='scss' scoped></style>